<template>
  <div class="container">
    <div class="top">
      <div style="min-width: 700px; display: flex; align-items: center">
        <span class="common-color-9">申请编号：</span
        ><span class="common-color-3">{{
          bookApplyInfo.apply_code || "-"
        }}</span>
      </div>
      <div class="right-btn">
        <el-button type="primary" size="small" @click="dialogFormVisible = true"
          >查看申请信息</el-button
        >
        <!-- 初审通过就不能撤销,隐藏按钮 -->
        <!-- <el-button type="primary" size="small">撤销申请</el-button> -->
      </div>
    </div>
    <el-divider></el-divider>
    <div class="flex-row">
      <div class="flex-column">
        <div style="margin-bottom: 10px">节点名称</div>
        <div class="mt20" style="height: 290px">
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :color="activity.color"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div style="height: 300px; margin-left: 300px">
        <div>
          <div>审批结果</div>
          <div class="mt20" style="line-height: 38px">
            <div
              class="status-btn"
              :style="handleStyle(item?.result)"
              v-for="(item, index) in activities"
              :key="index"
            >
              {{ item.result }}
            </div>
          </div>
        </div>
      </div>
      <div class="right-date" style="height: 300px; margin-left: 100px">
        <div>
          <div></div>
          <div class="time">
            <div
              v-for="(item, index) in activities"
              :key="index"
              class="item-time"
            >
              {{ parseTime(item.create_time) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="申请信息"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <ApplyFor ref="applyFor" :formData="bookApplyInfo" :disabled="true" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getBookApplyInfo,
  getBookApplyStatus,
} from "@/api/bkmanage/application";
import ApplyFor from "./apply-for.vue";
import { handleStyle, deepClone } from "../common/index";
export default {
  components: { ApplyFor },
  props: {
    applyId: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      bookApplyInfo: {}, // 申请信息
      dialogFormVisible: false, // 详情弹框
      reverse: false,
      activities: [
        {
          content: "提交",
          result: "已提交",
          color: "#5178C6",
        },
        {
          content: "初审",
          result: "未审核",
        },
        {
          content: "复审",
          result: "未审核",
        },
        {
          content: "终审",
          result: "未审核",
        },
        {
          content: "公示",
          result: "未公示",
        },
        {
          content: "完成",
          result: "未完成",
        },
      ],
    };
  },
  created() {
    if (this.applyId) {
      this.getBookInfo();
    }
  },
  methods: {
    // 申请状态 和 申请信息
    getBookInfo() {
      getBookApplyStatus({ applyId: this.applyId }).then(async (res) => {
        const act = deepClone(this.activities)
        await this.mergeActivities(act, res.rows)
      });
      getBookApplyInfo(this.applyId).then((res) => {
        const {
          speciality_code: specialityCode,
          speciality_name: specialityName,
          apply_reason: applyReason,
          academy_used_name: academyUsedName,
          ...rest
        } = res.data;
        this.bookApplyInfo = {
          specialityCode,
          specialityName,
          applyReason,
          academyUsedName,
          ...rest,
        };
      });
    },
    mergeActivities(activities, rows) {
      rows.forEach((item, index) => {
        item.color = "#5178C6";
        activities[index] = { ...activities[index], ...item };
      });
      // audit_status	审核状态：1通过；2驳回；3撤回
      activities.forEach((item, indexA) => {
        switch (indexA) {
          case 0:
            item.result = item.apply_status === 1 ? "已提交" : "";
            break;
          case 1:
          case 2:
          case 3:
            if (item.audit_status === 1) {
              item.result = "已同意";
            } else if (item.audit_status === 2) {
              item.result = "已拒绝";
            } else if (item.audit_status === 3) {
              item.result = "已撤回";
            } else {
              item.result = "未审核";
            }
            break;
          case 4:
            item.result = item.apply_status === 5 ? "已公示" : "未公示";
            break;
          case 5:
            item.result = item.apply_status === 6 ? "完成" : "未完成";
            break;
        }
      });
      this.activities = activities
    },
    handleStyle(item) {
      handleStyle(item);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-timeline-item {
  padding-bottom: 28px !important;
}

.container {
  .top {
    display: flex;
    justify-content: flex-start;

    .right-btn {
      margin-right: 50px;
    }
  }

  .right-date {
    .time {
      // line-height: 42.5px;

      .item-time {
        margin-top: 37px;
      }
      .item-time:first-child {
        margin-top: 50px;
      }
    }
  }

  /* 所有 .status-btn 的默认样式 */
  .status-btn {
    margin-top: 24px;
  }

  /* 仅第一个 .status-btn 的样式 */
  .status-btn:first-child {
    margin-top: 24px;
  }

  .status-btn {
    min-width: 60px;
    height: 30px;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    text-align: center;
  }
}
</style>
